<template>
  <div class="pdf-compontent" style="width: 100%;">
    <div class="tool-bar">
      <div style="color: #666">{{ pageNum }} / {{ pageTotalNum }}</div>
      <el-button-group>
        <el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage">上一页</el-button>
        <el-button type="primary" size="mini" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right" /></el-button>
      </el-button-group>
    </div>
    <pdf
      :src="urls"
      :page="pageNum"
      @progress="loadedRatio = $event"
      @num-pages="pageTotalNum=$event"
    />
  </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
  name: 'Pdf',
  components: {
    pdf
  },
  props: {
    urls: {
      type: String,
      default: (val) => {
        return pdf.createLoadingTask(val)
      }
    }
  },
  data() {
    return {
      url: '',
      pageNum: 1,
      pageTotalNum: 1, // 总页数
      loadedRatio: 0 // 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
    }
  },
  mounted() {
    // 有时PDF文件地址会出现跨域的情况,这里最好处理一下
    // this.urls = pdf.createLoadingTask(this.urls)
  },
  methods: {
    // 上一页
    prePage() {
      let page = this.pageNum
      page = page > 1 ? page - 1 : this.pageTotalNum
      this.pageNum = page
    },

    // 下一页
    nextPage() {
      let page = this.pageNum
      page = page < this.pageTotalNum ? page + 1 : 1
      this.pageNum = page
    }
  }
}
</script>

<style lang="scss" scoped>
.pdf-compontent{
    position: relative;
    .tool-bar{
        padding: 10px 5px;
        background: rgba($color: #fff, $alpha: 1);
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: sticky;
        top: 0;
        left: 0;
        z-index: 8888;
    }
}
</style>